<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% if title!='' %} {{title}} {% endif %}</title>
<style>
*{padding: 0;margin: 0;font-size: 16px;line-height: 20px;font-family: arial;}
a, a:visited{color:#337ab7;text-decoration: none;}
header{padding: 70px 0 70px 0;background-color: #4A6495}
h1{font-size: 36px;color:#fff;font-weight: normal;}
code{  padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #f9f2f4;border-radius: 4px;}
.content{width: 1000px;margin: auto}
.wrap{width: 1000px;margin: auto}
.content{margin-top: 80px;}
.list{width: 800px;}
.list .item{position: relative;padding-left: 70px;margin-top: 50px;}
.list .item .step{position: absolute;width: 36px;height: 36px;top:-3px;left:0;border: 5px solid #4A6495;border-radius: 23px;text-align: center;line-height: 36px;}
.list .item h2{font-size: 24px;font-weight: normal;}
.list .item p{line-height: 30px;margin-top: 10px}
</style>
 <script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script>
</head>
<body>
  <header>
    <div class="wrap">
      <h1>User List</h1>
    </div>
  </header>
  <div class="content">
    <div class="list">

      {% for list in data %}
      <div class="item">
        <div class="step">{{list.id}}</div>
        <h2>{{list.name}}</h2>
        <p>电话：{{list.mobile}}</p>
        <p>奖项：{% if list.type==1%} 100元JD卡 {% else %} 50元JD卡 {% endif%}</p>
        <p>地址：{{list.address}}</p>
        <p>IP：{{list.ip}}</p>
        <p>参加时间：{{list.ctime}}</p>
        <p>
          <a href="{{ctx.config('siteUrl')}}user/show/{{list.id}}">编辑</a>/
          <a class='del' del={{list.id}} href='javascript:void(0)'>删除</a>
        </p>
      </div>
      {% endfor %}

    </div>
  </div>
</body>
<script>
  console.log({{list}});

  //删除
  $(".del").click(function () {
    $.ajax({
      type: 'post',
      url: 'http://localhost:3000/user/del',
      data: { "id": $(this).attr("del") },
      success: function (data) {
        if (data.succ) {
          alert("删除成功");
          window.location.reload();
        } else {
          alert("删除失败");
        }
      }
    });
  });
</script>
</html>
